import React, { useState } from "react";
import { useNavigate } from 'react-router-dom'
import '../KFR_css/sou.css'
import { Form } from 'antd-mobile'
import { LeftOutline, SearchOutline,DeleteOutline } from 'antd-mobile-icons'
import { Input } from 'antd';

export default function Sou() {
    const navigate = useNavigate()
    const [rm_tuijian,setrm_tuijian]=useState([
        {id:1,name:'感冒'},
        {id:2,name:'鼻炎'},
        {id:3,name:'偏头痛'},
        {id:4,name:'妇科炎症'},
        {id:5,name:'糖尿病'},
        {id:6,name:'前列腺炎'},
        {id:7,name:'胃炎'},
        {id:8,name:'冠心病'},
    ])
    return (
        <div className="sou">
            <div className="sou_1">
                <div className="sou_1_1">
                    <div className="sou_1_1_1">
                        <LeftOutline fontSize={18} onClick={() => { navigate('/ks_guah') }} />
                    </div>
                    <div className="sou_1_1_2">搜索医院</div>
                </div>
            </div>

            <div className="sou_2">
                <div className="sou_2_1">
                    <div className="sou_2_1_1">
                    <Input size="large" placeholder="搜索科室、疾病、医院" prefix={<SearchOutline fontSize={16}/>} />
                    </div>
                    <div className="sou_2_1_2" onClick={() => { navigate('/ks_guah') }}>取消</div>
                </div>
            </div>

            <div className="sou_3">
                <div className="sou_3_1">
                    <div className="sou_3_1_1">历史搜索</div>
                    <div className="sou_3_1_2">
                    <DeleteOutline fontSize={18}/>
                    </div>
                </div>
                <div className="sou_3_2">
                    <div className="sou_3_2_1">
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div className="sou_4">
                <div className="sou_4_1">热门推荐</div>
                <div className="sou_4_2">
                    <div className="sou_4_2_1">
                        <ul>
                        {
                            rm_tuijian.map((ele,index)=>{
                                return <li key={ele.id}>{ele.name}</li>
                            })
                        }
                    </ul>
                    </div>
                </div>
            </div>
        </div>
    )
}